<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // var aList = document.getElementsByTagName("li")
             // alert(aList)  伪数组
            // console.log(aList.length)

            //获取ol下的li节点
        //     var oli1 = document.getElementById("ol1")
        //     var aList = oli1.getElementsByTagName("li") //返回伪数组

        //     for(var i = 0;i<aList.length ; i++){
        //         aList[i].style.backgroundColor="red"
        //     }
        //     console.log(aList)
        //     var aList1 = oli1.getElementsByClassName("box") //返回伪数组
        //     console.log(aList1)


        //     var node = document.getElementsByName("hello")
        //     for(var i = 0;i<node.length ; i++){
        //         node[i].style.backgroundColor="blue"
        //     }

        
            // var node1 = document.querySelector("#ol1")
            // var node2 = document.querySelector("[name = hello]")
            // node1.style.backgroundColor = "red"
            // var node2 = document.querySelector("ol .box")//什么下的节点可以加空格隔开
            // node2.style.backgroundColor = "blue"

            // var node3 = document.querySelectorAll("#ol1")
            // var node3 = document.querySelectorAll("ol li")
            // console.log(node3)
            // for(var i=0;i<node3.length;i++)
            // {
            //     node3[i].style.backgroundColor = "blue"
            // }
                var ol = document.getElementById("ol1")
                var nodes = ElementssByName(ol,"box")
                for(var i =0;i<nodes.length;i++){
                    nodes[i].style.backgroundColor = 'red'
                }

            
         }//手写ElementssByName()
            function ElementssByName(node,classStr){
                var nodes = node.getElementsByTagName("*")
                var arr = []
                for(var i =0;i<nodes.length;i++){
                    if(nodes[i].className === classStr)
                    arr.push(nodes[i])
                }
                return arr
            }
    </script>
</head>
<body>
    

        <ul>
            <li>111</li>
            <li class="box">111</li>
            <li class="box">111</li>
            <li>111</li>
            <li>111</li>
            <li name = "hello">111</li>
            <div class="box" name = "hello"></div>
        </ul>
        <input type="text" name = "hello" />
        <span name = "hello">span</span>
        <ol id="ol1">
            <li>111</li>
            <li class="box">111</li>
            <li>111</li>
            <li class="box">111</li>
            <li>111</li>
        </ol>
        
    
</body>
</html>